<template>
  <div class="customPopCheckbox">
    <div class="checkbox-title">{{ title }}</div>
    <div v-if="isMultiple" class="position-relative">
      <van-checkbox v-model="checked" class="checkAll" @click="checkAll">全部</van-checkbox>
      <van-checkbox-group v-model="checkbox" @change="handleChange">
        <van-checkbox name="" />
        <van-checkbox v-for="(item,index) in list" :key="index" :name="item.value">{{ item.label }}</van-checkbox>
      </van-checkbox-group>
    </div>
    <div v-if="!isMultiple" class="radio-box">
      <van-radio-group v-model="radio" @change="changeHandler">
        <van-radio v-for="(item,index) in radioList" :key="index" :name="item.value">{{ item.label }}</van-radio>
      </van-radio-group>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: '设备类型'
    },
    checkValue: {
      type: [Array, String, Number],
      default: ''
    },
    isMultiple: {
      type: Boolean,
      default: true
    },
    radioList: {
      type: Array,
      default: () => [{
        label: '是',
        value: 1
      }, {
        label: '否',
        value: 2
      }]
    },
    radioValue: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      checked: false,
      checkbox: [],
      radio: ''
    }
  },
  watch: {
    checkbox(nv) {
      // if (nv.length === this.list.length) {
      //   this.$emit('update:checkValue', -1)
      // } else {
      //   this.$emit('update:checkValue', nv.length > 0 ? nv.join(',') : '')
      // }
      this.$emit('update:checkValue', nv.length > 0 ? nv.join(',') : '')
    },
    checkValue(nv) {
      if (nv === '') {
        this.checkbox = []
      }
      // else {
      //   this.checkbox = nv.split(',').map(v => { return isNaN(parseInt(v)) ? v : parseInt(v) })
      // }
    },
    radio(nv) {
      this.$emit('update:radioValue', nv)
    },
    radioValue(nv) {
      this.radio = nv
    }
  },
  mounted() {
    if (this.isMultiple) {
      this.checkValue === ''
        ? this.checkbox = []
        : this.checkbox = this.checkValue.split(',')
          .map(v => { return parseInt(v) })
    } else {
      this.radio = this.radioValue
    }
  },
  methods: {
    checkAll() {
      if (this.checked) {
        this.checkbox = this.list.map(v => { return v.value })
      } else {
        this.checkbox = []
      }
    },
    handleChange() {
      this.checked = this.checkbox.length === this.list.length
    },
    changeHandler(name) {
      this.$emit('radioChange', name)
    },
    resetCheck() {
      if (this.isMultiple) {
        this.checked = false
        this.checkbox = []
      } else {
        this.radio = ''
      }
    }
  }
}
</script>

<style lang="scss">
.customPopCheckbox {
   border-bottom: 1px solid rgba(233, 233, 233, 1);
   padding-bottom: 10px;
   margin-bottom: 30px;
  .checkbox-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
  }
  .checkAll{
    position: absolute;
  }
}
</style>
